<template>
  <div class="pro-table-header">
    <div class="pro-table-title">
      <slot v-if="$slots.tableTitle" name="tableTitle"></slot>
      <span class="prefix-title" v-else-if="$props.tableTitle">
        {{ $props.tableTitle }}
      </span>
    </div>

    <div class="pro-table-operation">
      <slot name="operation"></slot>
      <n-button
        v-if="isExport"
        type="success"
        style="margin-left: 10px"
        @click="excelExportDownload"
      >
        导出
      </n-button>
      <n-divider v-if="tableTools && ($slots.operation || isExport)" vertical />
      <div v-if="tableTools" class="pro-table-tools">
        <n-tooltip v-if="refresh" trigger="hover">
          <template v-if="isDisplayRefres" #trigger>
            <span class="func-item">
              <icons
                name="icon-refresh"
                :style="{ fill: theme.darkMode === 'dark' ? '#fff' : null }"
                :size="20"
                @click="refreshHandle"
              />
            </span>
          </template>
          <span>刷新</span>
        </n-tooltip>

        <n-popselect
          v-model:value="density"
          :options="densityOptions"
          trigger="click"
        >
          <n-tooltip trigger="hover">
            <template #trigger>
              <span class="func-item">
                <icons
                  name="icon-columnHeight"
                  :style="{ fill: theme.darkMode === 'dark' ? '#fff' : null }"
                  :size="20"
                />
              </span>
            </template>
            <span>密度</span>
          </n-tooltip>
        </n-popselect>

        <n-tooltip trigger="hover">
          <template #trigger>
            <n-popover placement="bottom-end" trigger="click">
              <template #trigger>
                <span class="func-item">
                  <icons
                    name="icon-setting"
                    :style="{
                      fill: theme.darkMode === 'dark' ? '#fff' : null
                    }"
                    :size="20"
                  />
                </span>
              </template>

              <template #header>
                <n-space
                  item-style="display: flex;"
                  style="min-width: 280px"
                  align="center"
                  justify="space-between"
                >
                  <div>
                    <n-checkbox
                      label="列展示"
                      :checked="columnsSetting.displayColumn"
                      :indeterminate="columnIndeterminate"
                      @update:checked="displayColumnChange"
                    />
                    <n-checkbox
                      label="序列号"
                      :checked="columnsSetting.numberColumn"
                      @update:checked="numberColumnChange"
                    />
                    <!-- <n-checkbox
                      label="勾选列"
                      :checked="columnsSetting.selectColumn"
                      @update:checked="selectColumnChange"
                    /> -->
                  </div>

                  <n-button text type="primary" @click="resetColumns">
                    重置
                  </n-button>
                </n-space>
              </template>
              <n-checkbox-group
                :value="columnSelectList"
                @update:value="columnSelectListChange"
              >
                <div class="column-select-list" ref="columnSelectListRef">
                  <template
                    v-for="(item, index) in columnsSortList as [any] || []"
                    :key="item"
                  >
                    <div
                      v-show="
                        !['selection', 'expand', 'index'].includes(item.type)
                      "
                      class="column-item"
                    >
                      <div class="column-title">
                        <img
                          :src="drag"
                          style="margin-right: 5px; cursor: move"
                        />
                        <n-checkbox :value="item.key" :label="item.title" />
                      </div>

                      <icons
                        name="i-to-left"
                        size="20"
                        :fill="item.fixed === 'left' ? '#4d7cf7' : null"
                        @click="fixedHanle(index, 'left')"
                      />
                      <n-divider vertical />
                      <icons
                        name="i-to-right"
                        size="20"
                        :fill="item.fixed === 'right' ? '#4d7cf7' : null"
                        @click="fixedHanle(index, 'right')"
                      />
                    </div>
                  </template>
                </div>
              </n-checkbox-group>
            </n-popover>
          </template>
          <span>列设置</span>
        </n-tooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { OPERATION_PROVIDE } from './hooks/useOperation'
  import { useTheme } from '@/store/modules/theme'
  import drag from '@/assets/svg/drag.svg'
  import { proTableHeaderProps } from '../../props'

  defineProps(proTableHeaderProps)
  const theme = useTheme()

  const {
    columnsSetting,
    columnSelectList,
    columnsSortList,
    density,
    densityOptions,
    columnIndeterminate,
    columnSelectListRef,
    isDisplayRefres,
    refreshHandle,
    displayColumnChange,
    numberColumnChange,
    // selectColumnChange,
    resetColumns,
    columnSelectListChange,
    fixedHanle,
    excelExportDownload
  } = inject<any>(OPERATION_PROVIDE)
</script>

<style lang="less" scoped>
  .pro-table-header {
    width: 100%;
    height: 32px;
    margin-bottom: 10px;
    padding-left: 5px;
    display: flex;

    .pro-table-title {
      flex: 1;
      font-size: 16px;
      font-weight: 700;
      line-height: 32px;
    }

    .pro-table-operation {
      display: flex;
      align-items: center;

      .pro-table-tools {
        display: flex;
        align-items: center;

        .func-item {
          display: flex;
          align-items: center;
          margin-right: 8px;
        }
      }
    }
  }

  .column-select-list {
    .column-item {
      height: 22px;
      padding: 5px 0px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .column-title {
        flex: 1;
        display: flex;
        align-items: center;
      }
    }
  }

  // 左侧竖线块
  .prefix-title {
    position: relative;
    font-weight: 700;
    font-size: 16px;
    padding-left: 10px;

    &::before {
      content: '';
      position: absolute;
      width: 6px;
      height: 20px;
      left: -5px;
      top: 0px;
      background-color: var(--primary-color);
    }
  }
</style>
